
<template>
  <div class="listInfo flex2" v-show="Object.keys(detailInfo).length">
    <img class="listAvatar" :src="detailInfo.coverImgUrl" alt="">
    <div class="right">
      <div class="title flex2">
        <div class="titleTag">歌单</div>
        <div class="titleContent txt1">{{detailInfo.name}}</div>
      </div>
      <div class="user flex2">
        <img class='userAvatar' :src="detailInfo.creator.avatarUrl" alt="">
        <div class="userName" @click="$router.push({
          name:'personal' ,
          params:{
            uid:detailInfo.creator.userId
          }
        })">
          {{detailInfo.creator.nickname}}</div>
        <div class="createTime">{{detailInfo.createTime}}创建</div>
      </div>
      <div class="btns flex2">
        <div class="btnItem playAll flex3 " @click="playAll">
          <i class="iconfont icon-bofang "></i> 播放全部
        </div>
        <div class="btnItem flex3" @click="handleSubClick">
          <i class="iconfont icon-xihuan" :class="{'red':isSub}"></i>
          {{isSub ?'已收藏':'收藏'}}
        </div>
        <div class="btnItem flex3">
          <i class="iconfont icon-zhuanfa"> </i>
          分享
        </div>
      </div>
      <div class="tags">
        标签:<span class="tagItem" v-for="v in detailInfo.tags" :key="v">{{v}}</span>
        <span v-if="!detailInfo.tags.length">暂无标签</span>
      </div>
      <div class="otherInfo">
        <div class="musicNum">
          歌曲:{{detailInfo.trackCount}}
        </div>
        <div class="playCount">
          播放:{{detailInfo.playCount}}
        </div>
        <div class="desc">
          简介:{{detailInfo.description || '暂无简介'}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailInfo',
  props: {
    isSub: {
      type: Boolean,
      default: false
    },
    detailInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  methods: {
    playAll() {
      const list = this.detailInfo.tracks
      this.$store.commit('updateMusicId', list[0].id)
      this.$store.commit('updateMusicList', {
        musicListId: this.detailInfo.id,
        musicList: list
      })
    },
    handleSubClick() {
      this.$emit('handleSubClick')
    }
  }
}
</script>

<style scoped>
.listInfo {
  padding: 25px 15px;
}
.listAvatar {
  margin-right: 20px;
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.right {
  font-size: 12px;
  width: calc(100% - 200px);
}
.title {
  overflow: hidden;
}
.titleTag {
  margin-right: 5px;
  padding: 1px 2px;
  color: var(--red);
  border: 1px solid var(--red);
}
.titleContent {
  width: 80%;
  font-size: 20px;
  font-weight: 600;
  color: #373737;
}
.user {
  margin-top: 8px;
}
.userAvatar {
  margin-right: 8px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
.userName {
  margin-right: 8px;
  color: #6191c2;
}
.tags {
  margin-top: 8px;
}
.tagsItem {
  margin-right: 5px;
  color: #661199;
}
.btns {
  margin-top: 8px;
}
.btnItem {
  margin-right: 5px;
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.btnItem i {
  margin-right: 3px;
}
.playAll {
  background-color: #ec4141;
  color: #fff;
}
.otherInfo > div {
  margin-top: 5px;
}
.musicNum i {
  margin-right: 13px;
}

.red {
  color: #661199;
}
</style>